<template>
   <div class="header">
       <img class="bgimg" :src="goodsdata.avatar" alt="">
       <div class="bg"></div>
       <div class="container">
        <img class="avatar" :src="goodsdata.avatar" alt="">
        <div class="header_right">
            <div class="top">
                <img src="./brand@2x.png"/>
                <span>{{goodsdata.name}}</span>
            </div>
            <div class="middle">{{goodsdata.description}}/{{goodsdata.deliveryTime}}分送达</div>
            <div class="bottom">
                <img src="./decrease_1@2x.png" />
                在线支付满28减5，满50减10
                <span>5个 ></span>
            </div>
        </div>
       </div>
       <div class="notice">
           <img src="./bulletin@2x.png" alt="" srcset="">
           {{goodsdata.str}}</div>
    </div>
</template>

<script>
export default {
    data:function(){
        return {
            goodsdata:{}
        }
    },
    created:async function(){
        let {data}  = await this.$http.get("/api/seller");
        data['str'] = data.bulletin.slice(0,20)+"...";
        console.log(data);
        this.goodsdata = data;
    }
}
</script>

<style scoped>
/* 头部样式 start */
    .header{
        width:750px;
        height: 284px;
        position: relative;
        color: white;
    }
    .bg{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 750px;
        height: 284px;
        background-size: 100% 100%;
        background-color: rgba(7, 17, 27, 0.5);
    }
    .bgimg{
        width: 750px;
        height: 284px;
        filter: blur(10px);
    }
    .container{
        display: flex;
        margin-bottom: 36px;
        position: absolute;
        left: 0px;
        top: 0px;
    }
    .avatar{
        width: 128px;
        height: 128px;
        border-radius: 4px;
        margin-top: 48px;
        margin-left: 48px;
    }
    .header_right{
        width: 500px;
        height: 128px;
        margin-top: 48px;
        /* background: red; */
        margin-left: 32px;
    }
    .top{
        font-size: 32px;
    }
    .middle{
        font-size: 24px;
        font-weight: 200;
        line-height: 24px;
        margin-top: 16px;
        margin-bottom: 20px;
    }
    .bottom{
        font-size: 20px;
        height: 50px;
        line-height: 50px;
    }
    .bottom img{
        vertical-align: middle;
        margin-right: 8px;
    }
    .top img{
        vertical-align: middle;
    }
    .top span{
        margin-left: 12px;
    }
    .bottom span{
        float: right;
        width: 80px;
        height: 50px;
        background: red;
        line-height: 50px;
        text-align: center;
        font-size: 20px;
        background-color: rgba(0, 0, 0,0.2);
        border-radius: 20px;
    }
    .notice{
        position:absolute;
        left: 0px;
        top: 230px;
        height: 56px;
        width: 726px;
        line-height: 56px;
        padding-left: 24px;
        background-color: rgba(7, 17, 27, 0.2);
    }
    .notice img{
        vertical-align: middle;
    }
    /* 头部样式 end */
</style>